<template>
  <div class="padding-16">
    <a-card class="general-card" title="文章列表">

      <a-form
        ref="refSearchForm"
        :model="searchForm"
        auto-label-width
      >
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item field="title" label="标题">
              <a-input v-model="searchForm.title" placeholder="请输入标题" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="contentType" label="分类">
              <a-select v-model="searchForm.contentType" :options="contentTypeOptions" placeholder="全部" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="publish_time" label="发布时间">
              <a-range-picker v-model="searchForm.publish_time" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="status" label="状态">
              <a-select v-model="searchForm.status" :options="articleStatusOptions" placeholder="全部" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item>
              <a-space :size="16">
                <a-button type="primary" @click="onPageChange(1)">
                  <template #icon>
                    <icon-search />
                  </template>
                  查询
                </a-button>
                <a-button @click="$refs.refSearchForm.resetFields()">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  重置
                </a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-divider style="margin-top: 0" />

      <a-space style="margin-bottom: 16px">
        <a-button type="primary" @click="$router.push({name: 'ContentArticleCreate'})">
          <template #icon>
            <icon-plus />
          </template>
          创建文章
        </a-button>
      </a-space>

      <a-table
        bordered
        row-key="id"
        :data="tableData"
        :loading="loading"
        :pagination="pageValue"
        @page-change="onPageChange"
      >
        <template #columns>
          <a-table-column title="文章ID" data-index="id"></a-table-column>
          <a-table-column title="文章标题" data-index="title"></a-table-column>
          <a-table-column title="文章分类" data-index="category_name"></a-table-column>
          <a-table-column title="状态" data-index="status">
            <template #cell="{ record }">
              <DictBadge :options="articleStatusOptions" :value="record.status"/>
            </template>
          </a-table-column>
          <a-table-column title="排序" data-index="sort"></a-table-column>
          <a-table-column title="展示量" data-index="views"></a-table-column>
          <a-table-column title="发布时间" data-index="publish_time"></a-table-column>
          <a-table-column title="操作" :width="160">
            <template #cell="{ record }">
              <a-button
                type="text"
                @click="$router.push({name: 'ArticleCreate', query: {id: record.id}})">
                编辑
              </a-button>
              <a-popconfirm content="删除后不可恢复，确定要删除吗？" @ok="handleDelete(record)">
                <a-button type="text" status="danger">删除</a-button>
              </a-popconfirm>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { articleList, categoryDelete } from "@/api/content/article";
import { Message } from "@arco-design/web-vue";
import get from "lodash/get";
import { articleStatusOptions } from "@/enums/status";
import useLoading from "@/hooks/loading";

const {loading, setLoading} = useLoading()
const generateFormModel = () => {
  return {
    title: "",
    name: "",
    contentType: "",
    filterType: "",
    publish_time: [],
    status: ""
  };
};

const searchForm = ref(generateFormModel());

const contentTypeOptions = computed(() => [
  {
    label: "图文",
    value: "img"
  },
  {
    label: "横版短视频",
    value: "horizontalVideo"
  },
  {
    label: "竖版小视频",
    value: "verticalVideo"
  }
]);


const tableData = ref([]);
const pageValue = reactive({
  pageSize: 50,
  current: 1,
  total: 0
});

async function fetchTableData(extraParam = {}) {
  setLoading(true)
  try {
    let params = {
      ...pageValue
    };
    if (extraParam) {
      params = {
        ...params,
        ...extraParam
      };
    }
    const { data } = await articleList(params);
    tableData.value = get(data, "list", []);
    pageValue.current = data.current || 0;
    pageValue.total = data.total || 0;
  } catch (err) {
    console.warn(err);
    Message.error("出了点小问题，请稍后重试！");
  }
  setLoading(false)
}

const onPageChange = (current: number) => {
  fetchTableData({ current });
};

onPageChange(1)

const handleSearch = () => {
  // fetchTableData({
  //   ...basePagination,
  //   ...formModel.value,
  // });
};

async function handleDelete(rowData) {
  if (!rowData.id) return;
  setLoading(true);
  try {
    const { msg } = await categoryDelete(rowData);
    Message.success(msg || "删除成功！");
    await fetchTableData();
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
}
</script>

<script lang="ts">
export default {
  name: "ArticleList"
};
</script>

<style scoped lang="less">

</style>
